<template>
	<div
		ref="el"
		class="relative -mt-hover-offset"
		@mouseenter="hover = true"
		@mouseleave="hover = false">
		<n-carousel
			class="base-swiper"
			:current-index="currIndex"
			:slides-per-view="pageSize"
			:space-between="10"
			:show-dots="false"
			:loop="false"
			draggable
			autoplay
			@update:current-index="onChange"
			v-bind="$attrs">
			<slot></slot>
		</n-carousel>
		<template v-if="!hideAction">
			<transition
				enter-active-class="animate__animated animate__fadeIn"
				leave-active-class="animate__animated animate__fadeOut">
				<div
					v-if="hasPrev"
					class="absolute left-0 top-[50%] w-9 h-9 -translate-x-[50%] -translate-y-[50%] rounded-full bg-bg-3 flex justify-center items-center shadow-md text-t-3 hover:text-t-1 cursor-pointer duration-300 transition-color">
					<base-icon name="back" class="text-[20px]" @click="onPrev"></base-icon>
				</div>
			</transition>
			<transition
				enter-active-class="animate__animated animate__fadeIn"
				leave-active-class="animate__animated animate__fadeOut">
				<div
					v-if="hasNext"
					class="absolute right-0 top-[50%] w-9 h-9 translate-x-[50%] -translate-y-[50%] rounded-full bg-bg-3 flex justify-center items-center shadow-md text-t-3 hover:text-t-1 cursor-pointer duration-300 transition-color">
					<base-icon name="go" class="text-[20px]" @click="onNext"></base-icon>
				</div>
			</transition>
		</template>
	</div>
</template>

<script lang="ts" setup>
import { NCarousel } from 'naive-ui'
import BaseIcon from '../icon/index.vue'
import { computed, ref } from 'vue'
import { useListCols } from '@/hooks'

const props = defineProps({
	total: {
		type: Number,
		default: 0
	},
	maxCols: {
		type: Number
	},
	multiple: {
		type: Number,
		default: 1
	},
	hideAction: {
		type: Boolean,
		default: false
	}
})

const pageSize = computed(
	() => (props.maxCols ? Math.min(props.maxCols, cols.value) : cols.value) * props.multiple
)

const el = ref(null)

const { cols } = useListCols(el)

const currIndex = ref(0)

const hover = ref(false)

const onChange = (val: number) => {
	currIndex.value = val
}

const hasNext = computed(() => hover.value && pageSize.value + currIndex.value < props.total)

const onNext = () => {
	currIndex.value = currIndex.value + pageSize.value
}

const hasPrev = computed(() => hover.value && currIndex.value > 0)

const onPrev = () => {
	currIndex.value = currIndex.value - pageSize.value
}
</script>
